/**
 * @description: 用户登入
 * @author: blue
 */

import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput, Button, Image, TouchableHighlight } from 'react-native';
import { Layout, Body }  from '../../../components/components';
import { LANG, i18n } from '../../../config/config';


export default class Singin extends Component {
  static navigationOptions = {
    title: '登入'
  };


  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      userPassword: ''
    };
    this.singIn = this.singIn.bind(this);
  }

  singIn() {

    alert(1);
  }

  render() {
    const { navigate } = this.props.navigation;
    return (
      <Layout>
        <Body spacing={true} style={{flexDirection: 'column',justifyContent: 'center'}}>
          <View>
            <View style={styles.input}>
              <TextInput
                style={{height: 40}}
                placeholder={i18n[LANG].userName}
                underlineColorAndroid="transparent"
                onChangeText={(value) => this.setState({userName: value})}
              />
            </View>
            <View style={styles.input}>
              <TextInput
                style={{height: 40}}
                placeholder={i18n[LANG].password}
                underlineColorAndroid="transparent"
                placeholderTextColor="red"
                secureTextEntry={true}
                onChangeText={(value) => this.setState({userPassword: value})}
              />
            </View>
            <View style={{marginBottom: 10}}>
              <Button
                onPress={this.singIn}
                title={i18n[LANG].singIn}
                color="#841584"
                accessibilityLabel="Singin"
              />
            </View>
            <View style={{flexDirection: 'row', justifyContent: 'space-between', padding: 5}}>
              <TouchableHighlight onPress={() => navigate('forgetPassword')}>
                <Text on>{i18n[LANG].forgetPassword}?</Text>
              </TouchableHighlight>
              <TouchableHighlight onPress={()=>{consoel.log(1)}}>
                <Text style={{textAlign: 'right'}}>{i18n[LANG].singUp}</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Body>
      </Layout>
    );
  }
}

let styles =  StyleSheet.create({
  input: {
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: '#ddd',
    marginBottom: 10,
    paddingLeft: 5,
    paddingRight: 5
  }
});
